<template>
  <header class="header">
    <div class="header-left">
      <router-link to="/" class="logo-wrapper">
        <img src="@/assets/logo.svg" alt="logo" class="logo" />
        <span class="site-name">儿童英语学习网站</span>
      </router-link>
    </div>

    <nav class="nav-menu" v-if="userInfo">
      <!-- 学生菜单 -->
      <template v-if="userInfo.role === 'student'">
        <div class="menu-group">
          <router-link to="/student/tasks/current" class="menu-item">
            <i class="icon">📚</i>
            <span>当前任务</span>
          </router-link>
        </div>
        <div class="menu-group">
          <router-link to="/student/analysis" class="menu-item">
            <i class="icon">📊</i>
            <span>学习分析</span>
          </router-link>
        </div>
        <div class="menu-group">
          <router-link to="/student/interaction" class="menu-item">
            <i class="icon">💬</i>
            <span>互动交流</span>
          </router-link>
        </div>
        <div class="menu-group">
          <router-link to="/shop" class="menu-item">
            <i class="icon">🛍️</i>
            <span>文具商城</span>
          </router-link>
        </div>
      </template>

      <!-- 家长菜单 -->
      <template v-if="userInfo.role === 'parent'">
        <div class="menu-group">
          <router-link to="/parent/analysis/tasks" class="menu-item">
            <i class="icon">📊</i>
            <span>任务详情</span>
          </router-link>
        </div>
        <div class="menu-group">
          <router-link to="/parent/monitor" class="menu-item">
            <i class="icon">👀</i>
            <span>学习监督</span>
          </router-link>
        </div>
        <div class="menu-group">
          <router-link to="/parent/analysis/progress" class="menu-item">
            <i class="icon">💬</i>
            <span>完成情况</span>
          </router-link>
        </div>
        <div class="menu-group">
          <router-link to="/shop" class="menu-item">
            <i class="icon">🛍️</i>
            <span>文具商城</span>
          </router-link>
        </div>
      </template>

      <!-- 教师菜单 -->
      <template v-if="userInfo.role === 'teacher'">
        <div class="menu-group">
          <router-link to="/teacher/tasks/create" class="menu-item">
            <i class="icon">✏️</i>
            <span>创建任务</span>
          </router-link>
        </div>
        <div class="menu-group">
          <router-link to="/teacher/tasks/manage" class="menu-item">
            <i class="icon">👨‍🏫</i>
            <span>任务管理</span>
          </router-link>
        </div>
        <div class="menu-group">
          <router-link to="/teacher/students" class="menu-item">
            <i class="icon">👨‍👩‍👧‍👦</i>
            <span>学生管理</span>
          </router-link>
        </div>
        <div class="menu-group">
          <router-link to="/teacher/data" class="menu-item">
            <i class="icon">📊</i>
            <span>数据分析</span>
          </router-link>
        </div>
        <div class="menu-group">
          <router-link to="/shop" class="menu-item">
            <i class="icon">🛍️</i>
            <span>文具商城</span>
          </router-link>
        </div>
      </template>
    </nav>

    <div class="header-right">
      <div class="notification-icon" @click="toggleNotifications">
        <i class="icon">🔔</i>
        <span class="badge" v-if="notificationCount">{{ notificationCount }}</span>
      </div>
      <div class="user-info" v-if="userInfo">
        <span class="welcome">欢迎，{{ userInfo.name }}</span>
        <div class="avatar" @click="toggleDropdown">
          {{ userInfo.name.charAt(0) }}
        </div>
        <div class="dropdown-menu" v-show="showDropdown">
          <div class="dropdown-item">
            <i class="icon">👤</i>
            <span>个人信息</span>
          </div>
          <div class="dropdown-item">
            <i class="icon">⚙️</i>
            <span>系统设置</span>
          </div>
          <div class="dropdown-divider"></div>
          <div class="dropdown-item" @click="handleLogout">
            <i class="icon">🚪</i>
            <span>退出登录</span>
          </div>
        </div>
      </div>
    </div>

    <!-- 通知面板 -->
    <div class="notification-panel" v-if="showNotifications">
      <div class="notification-header">
        <h3>消息通知</h3>
        <span class="close-btn" @click="toggleNotifications">×</span>
      </div>
      <div class="notification-list">
        <div class="notification-item" v-for="notice in notifications" :key="notice.id">
          <div class="notice-icon" :class="notice.type">
            <i class="icon">{{ notice.icon }}</i>
          </div>
          <div class="notice-content">
            <div class="notice-title">{{ notice.title }}</div>
            <div class="notice-time">{{ notice.time }}</div>
          </div>
        </div>
      </div>
    </div>
  </header>
</template>

<script>
export default {
  name: 'Header',
  data() {
    return {
      userInfo: null,
      showDropdown: false,
      showNotifications: false,
      notificationCount: 3,
      notifications: [
        {
          id: 1,
          type: 'task',
          icon: '📚',
          title: '新作业已发布：Unit 3 词汇练习',
          time: '10分钟前'
        },
        {
          id: 2,
          type: 'message',
          icon: '💬',
          title: '王老师给您发送了一条消息',
          time: '30分钟前'
        },
        {
          id: 3,
          type: 'system',
          icon: '🔔',
          title: '系统维护通知',
          time: '2小时前'
        }
      ]
    }
  },
  created() {
    // 从localStorage获取用户信息
    const userStr = localStorage.getItem('user')
    if (userStr) {
      this.userInfo = JSON.parse(userStr)
    }
  },
  methods: {
    toggleDropdown() {
      this.showDropdown = !this.showDropdown
      if (this.showDropdown) {
        this.showNotifications = false
      }
    },
    toggleNotifications() {
      this.showNotifications = !this.showNotifications
      if (this.showNotifications) {
        this.showDropdown = false
      }
    },
    handleLogout() {
      localStorage.removeItem('user')
      this.$router.push('/login')
    }
  }
}
</script>

<style scoped>
.header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 15%;
  box-sizing: border-box;
  height: 64px;
  background: linear-gradient(to right, #ffffff, #f8f9fa);
  border-bottom: 1px solid #eaeaea;
}

.header-left {
  display: flex;
  align-items: center;
}

.logo-wrapper {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: inherit;
}

.logo {
  height: 32px;
  margin-right: 12px;
}

.site-name {
  font-size: 18px;
  font-weight: 600;
  color: #333;
}

.nav-menu {
  display: flex;
  gap: 24px;
  min-width: 65%;
}

.menu-item {
  display: flex;
  align-items: center;
  text-decoration: none;
  color: #666;
  font-size: 14px;
  padding: 8px 16px;
  border-radius: 6px;
  transition: all 0.3s;
}

.menu-item:hover {
  background: #f5f7fa;
  color: #409eff;
}

.menu-item.router-link-active {
  color: #409eff;
  background: #ecf5ff;
}

.menu-item .icon {
  margin-right: 8px;
  font-size: 16px;
}

.header-right {
  display: flex;
  align-items: center;
}

.user-info {
  display: flex;
  align-items: center;
  position: relative;
}

.welcome {
  margin-right: 12px;
  font-size: 14px;
  color: #666;
}

.avatar {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  background: #409eff;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  cursor: pointer;
  transition: transform 0.3s;
}

.avatar:hover {
  transform: scale(1.05);
}

.dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  margin-top: 8px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
  padding: 8px 0;
  min-width: 120px;
}

.dropdown-item {
  display: flex;
  align-items: center;
  padding: 8px 16px;
  font-size: 14px;
  color: #666;
  cursor: pointer;
  transition: all 0.3s;
}

.dropdown-item:hover {
  background: #f5f7fa;
  color: #409eff;
}

.dropdown-item .icon {
  margin-right: 8px;
}

.notification-icon {
  position: relative;
  margin-right: 20px;
  cursor: pointer;
  font-size: 20px;
}

.badge {
  position: absolute;
  top: -8px;
  right: -8px;
  background: #f56c6c;
  color: white;
  border-radius: 10px;
  padding: 2px 6px;
  font-size: 12px;
  line-height: 1;
}

.notification-panel {
  position: absolute;
  top: 60px;
  right: 20px;
  width: 300px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15);
  z-index: 1000;
}

.notification-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 12px 16px;
  border-bottom: 1px solid #eee;
}

.notification-header h3 {
  margin: 0;
  font-size: 16px;
  color: #333;
}

.close-btn {
  cursor: pointer;
  font-size: 20px;
  color: #909399;
}

.notification-list {
  max-height: 400px;
  overflow-y: auto;
}

.notification-item {
  display: flex;
  padding: 12px 16px;
  border-bottom: 1px solid #f5f5f5;
  cursor: pointer;
  transition: all 0.3s;
}

.notification-item:hover {
  background: #f5f7fa;
}

.notice-icon {
  margin-right: 12px;
  font-size: 16px;
}

.notice-content {
  flex: 1;
}

.notice-title {
  font-size: 14px;
  color: #333;
  margin-bottom: 4px;
}

.notice-time {
  font-size: 12px;
  color: #909399;
}

.dropdown-divider {
  height: 1px;
  background: #eee;
  margin: 4px 0;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(-10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* 响应式适配 */
@media (max-width: 768px) {
  .header {
    padding: 0 20px;
  }

  .site-name {
    display: none;
  }

  .welcome {
    display: none;
  }

  .menu-item {
    padding: 8px;
  }

  .menu-item span {
    display: none;
  }
}
</style>
